<template>
  <div class="cspvote">
    <div class="cspvote-header">
      <button class="cspvote-header-btn" @click="addVote">点我添加投票</button>
    </div>
    <div
      class="cspvote-body"
      v-for="(node_content, index) in activityMessage.node_contents"
      :key="index"
    >
      <div class="cspvote-body-question">
        <div class="cspvote-body-question-title">题目</div>
        <div class="cspvote-body-question-content">
          <div class="cspvote-body-question-content-up">
            <a-textarea
              v-model="node_content.title"
              placeholder="Autosize height based on content lines"
              :rows="4"
            />
          </div>

          <div class="cspvote-body-question-content-down">
            <div class="cspvote-body-question-content-down-a">
              <label class="cspvote-body-question-content-down-a-l"
                >选项票数</label
              >
            </div>
            <div class="cspvote-body-question-content-down-b"></div>
          </div>
        </div>
      </div>
      <div class="cspvote-body-options">
        <div class="cspvote-body-options-title">
          <!-- <div class="cspvote-body-options-title-label">问题选项</div> -->
          <div class="cspvote-body-options-title-add">
            <button
              class="cspvote-body-options-title-add-btn"
              @click="node_content.options.push('')"
            >
              添加选项
            </button>
          </div>
        </div>
        <div class="cspvote-body-options-content">
          <div class="cspvote-body-options-content-item">
            <a-input
              v-for="(option, index) in node_content.options"
              :key="index"
              class="ques-body-options-content-item-options"
              v-model="node_content.options[index]"
            >
              <template #prefix>
                <button class="cspvote-body-options-content-item-btn">
                  {{ ENG_CHARS[index] }}
                </button>
              </template>
              <template #suffix>
                <a-icon type="close" @click="closeOption(index)"></a-icon>
              </template>
            </a-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  props: {
    activityMessage: Object,
    // publish:Number,
  },
  data() {
    const ENG_CHARS = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
    const MAX_OPTIONS = ENG_CHARS.length;
    return {
      ENG_CHARS,
      MAX_OPTIONS,
      cards: { title: "", options: [] },
      optionlength: 4,
    };
  },
  computed: {
    ...mapGetters({
      vote: "teacher/getVote",
    }),
  },
  mounted() {
    // this.activityMessage
    console.log(
      "🚀 ~ file: PreVote.vue ~ line 101 ~ mounted ~ this.activityMessage",
      this.activityMessage
    );
  },
  methods: {
    node_vote() {
      try {
        const node_contents = this.cards.map((item, index) => {
          return {
            options: item.options,
            question_type: null,
            right_answer: "",
            title: this["editor" + index].txt.text(),
          };
        });
        this.$store.commit("teacher/updateNodeContents", node_contents);
        this.$message.info("暂存成功");
      } catch (err) {
        this.$message.error("暂存失败");
        console.log(err);
      }
    },
    closeOption(index) {
      if (this.activityMessage.node_contents[0].options.length <= 2) {
        this.$message.info("选项不能少于两个！");
        return null;
      }
      this.activityMessage.node_contents[0].options.splice(index, 1);
    },
    addOption(idx) {
      const length = this.cards[idx].options.length;
      if (length >= this.MAX_OPTIONS) {
        this.$message.info(`选项不能超过${this.MAX_OPTIONS}个！`);
        return null;
      }
      this.cards[idx].options.push("");
    },
    closeCard(idx) {
      this.cards.splice(idx, 1);
      this.optionlength.splice(idx, 1);
    },
    addVote() {
      this.activityMessage.node_contents.push({
        options: ["", "", "", ""],
        right_answer: "",
        title: "",
      });
    },
  },
};
</script>

<style lang="scss">
/* .card-btn .ant-btn {
  margin: 0 5px;
}

.title h3 {
  padding: 10px 0;
}
#editor0{
  position: relative;
  z-index: 0;
}
.options {
  padding-left: 30px;
  position: relative;
  right: 10px;
  margin-bottom: 20px;
}

.card {
  height: auto;
  margin-bottom: 40px;
} */
</style>
